<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>开始游戏</title>
	<style type="text/css">
		html,body{
			margin: 0;
			padding: 0;
			width: 100%;
			height: 100%;
		}
		body{
			background: url("./images/background.png") no-repeat;
     		background-size: 100%;
		}
		.content{
			width: 100%;
			height: 11%;
			position: absolute;
			bottom: 6%;
		}
		.content div{
			width: 36%;
			height: 65%;
			/*float: left;*/
			margin: -24% auto;
		}
		.content div img{
			width:100%;
			height: 100%;
		}
		.guize{
			width:100%;
			height: 100%;
			position: absolute;
			background-color: rgba(143,146,150,0.6);
			display: none;
		}
		.guize-content{
			width: 77.225673%;
			height: 60.526316%;
			margin:0 auto;
			margin-top: 27.789474%;
     		position: relative;
		}
		.guize-content .img{
			width: 100%;
			height: 100%;
		}
		.guize-content-close{
			width: 5rem;
			height: 5rem;
			position: absolute;
			right: -2.2rem;
			top: -2.2rem;
		}
		.guize-content-close img{
			width: 100%;
			height: 100%;
		}
	</style>
</head>
<body>
	<div class="content">
		<div><img id="start_game" src="./images/start.png"/></div>
		<!--<div><img id="guize" src="./images/guize.png"/></div>-->
	</div>
	<div class="guize">
		<div class="guize-content">
			<img class="img" src="./images/guize_content.png">
			<div class="guize-content-close"><img id="guize-content-close" src="./images/shet.png"/></div>
		</div>
	</div>
	<script type="text/javascript" src="./js/jquery-2.1.4.min.js"></script>
	<script type="text/javascript">
	$(document).ready(function(){

		//适配屏幕
		var body_width = $("body").width();
		var body_height = $("body").height();
		$("body").css({"background-size":body_width+"px "+body_height+"px"});

		//开始游戏
		$("#start_game").click(function(){
			window.location.href = "gameing.html";
		});

		//规则弹框
		$("#guize").click(function(){
			$(".guize").show();
		});

		//弹框关闭按钮
		$("#guize-content-close").click(function(){
			$(".guize").hide();
		});
	});
	</script>
</body>
</html>
